<template>
    <div class="home-recommond">
        <h1>推荐歌单</h1>
        <div class="wrapper" ref="wrapper">
        <ul class="content" ref="content">
            <li v-for="(item,index) in listData" :key="index"
            @click="selectItem(item)">
             <div class="cover">
                <van-image :src="item.cover" radius="10" />
                <span>{{ item.listen_num | numFilter(1)}}万</span>
             </div>
             <span>{{ item.title }}</span>
            </li>
        </ul>
        </div>
    </div>
</template>
<script>
import { betterScrollHorizontal } from "../../common/betterScroll.js";
export default{
    data(){
        return{
            listData:[]
        }
    },
created(){
    this.getSongListData()
},
methods:{
    getSongListData(){
        this.$request('get','/recommend/playlist/u')
          .then(res=>{
            console.log(res)
            if(res.result == 100){
                this.listData = res.data.list;
            }
            betterScrollHorizontal(
                this,
                this.$refs.wrapper,
                this.$refs.content,
                this.listData.length,
                10
            );
          });
    },
    selectItem(item){
        const id = item.content_id;
        console.log(id);
        this.$router.push({path:`/songlist/${id}`})
    },
},
//             this.betterScrollHorizontal(this.listData.length, 10);
//           })
//     },
//     betterScrollHorizontal(num, itemWidth){
//         this.$refs.content.style.width = num * itemWidth + "rem"
//             this.$nextTick(() => {
//             this.scroll = new BScroll(this.$refs.wrapper, {
//                 startX:0,
//                 scrollX:true,
//                 scrollY:false,
//                 })
//             })
//     }
// },
// filters:{
//     numFilter(value,num){
//         return parseFloat(value/10000).toFixed(num)
//     },
// },
};
</script>
<style scoped>
/* .home-recommond>ul{ 
    display: flex;
     flex-wrap: wrap;
    }
.home-recommond>ul>li{

width:calc((100%- 1rem)/3*1);
}
.home-recommond>ul>li:nth-of-type(3n+2){
margin-left:0.5rem; 
margin-right: 0.5rem;
}*/
.cover{
position: relative;
}
.cover>span{
position: absolute; 
right: 0.2rem;
bottom:0.3rem;
background-color:red;
color: white;
font-size: 14px;
border-radius: 1rem;
width: 5rem;
display:inline-block;
} 
.wrapper{
    width: 100%;
    overflow: hidden;
}
/* ul.content{
    width: calc(12 * 10rem);
} */
ul.content li{
    display: inline-block;
    width: 10rem;
    vertical-align: top;
}
ul.content li * {
    margin: 0.1rem;
}
ul.content li > span {
    font-size: 0.8rem;
    color: #54493b;
}
</style>